/*
 * @Descripttion: 
 * @Author: cuidm
 * @Date: 2022-06-29 14:22:48
 * @LastEditors: cuidm
 * @LastEditTime: 2022-09-20 11:23:56
 */
import React, { useEffect, useState } from "react";
import { Affix, Button, Alert, Radio, Select, Input, Space, Row, Col, Tabs, Spin, Tooltip } from "antd";
import { QuestionCircleFilled } from '@ant-design/icons';
import request, { exportFile } from "@/utils/request";
import { CmdbContent, CmdbHeader, isAuthorized, BusinessBtn } from "@/components";
import { Resizable } from 'react-resizable';
import cmdbres from "@/data/cmdbres";
import hcpUtils from '@/utils/hcpUtils';
import BusinessTree from './businessTree';
import EcsInstance from "./ecsInstance";
import EcsTopology from "./ecsTopology";
import "./index.less";
const {TabPane} = Tabs;

const BusinessTopology = ({ history, match, location }) => {
    const paramsId = match.params.id;
    const BizModelCodes = ['server', 'metal_server', 'phy_server'];//【云主机/裸金属/服务器】支持业务拓扑
    const [activeKey, setActiveKey] = useState(paramsId ? 'topology' : BizModelCodes[0]);
    const [biz, setBiz] = useState();
    const [selectTreeNode, setSelectTreeNode] = useState();
    const [selectModuleId, setSelectModuleId] = useState();
    const [leftWidth, setLeftWidth] = useState(230);
    const [loading, setLoading] = useState(false);
    const [bizModelData, setBizModelData] = useState([]);
    const [modelData, setModelData] = useState([]);
    const onChange = (key) => {
        setActiveKey(key);
    }

    const queryModel = async () => {
        try {
            setLoading(true);
            let res = await request({
                ...cmdbres.queryModelList,
                params: {
                    namespace: "default",
                },
            });
            
            if (res && res.code == 200) {
                let arr = [];
                let allModuleArr = [];
                hcpUtils.treeDataIteration(res.data, function (item) {
                    if(item.definitions && item.definitions.length) {
                        item.children = item.children ? item.children.concat(item.definitions) : item.definitions;
                    }
                    if(item.cmModuleId) { //是模型
                        if(BizModelCodes.includes(item.moduleCode)) {
                            arr.push(item);
                        }
                        allModuleArr.push(item);
                    }
                });
                setBizModelData(arr);
                setModelData(allModuleArr);
            }
            setLoading(false);
        } catch (error) {
            console.log(error);
        }
    }

    useEffect(()=> {
        queryModel()
    }, [])

    return (
        <CmdbContent>
            <CmdbHeader title={'业务拓扑'} />
            <section className="hcp__page">
                <section className="hcp__page__container" style={{backgroundColor: "#fff", padding: "10px"}}>
                <div className="affix-header">
                    <BusinessBtn setBiz={setBiz} defaultId = {paramsId} biz={biz} history={history}/>
                </div>
                <div className="main-views">
                    <Resizable
                        style={{display: activeKey != "topology" ? 'block':'none'}}
                        width={leftWidth}
                        axis='x'
                        height={0}
                        minConstraints={[200]}
                        maxConstraints={[400]}
                        handle={React.createElement('span', {
                            className: `react-resizable-handle`,
                            onClick: (e) => {
                                e.stopPropagation();
                            },
                        })}
                        onResize={(event, { element, size })=> {setLeftWidth(size.width);}}
                        draggableOpts={{ enableUserSelectHack: false }}
                    >
                        <div style={{width: leftWidth, height:'100%', float: 'left'}}>
                            <BusinessTree biz={biz} setSelectTreeNode={setSelectTreeNode} setSelectModuleId = { setSelectModuleId }/>
                        </div>
                    </Resizable>
                    {
                        loading ? <div style={{width: '100%', height: 300, lineHeight: 300, textAlign: 'center'}}><Spin/></div> :
                        <div
                            style={{width: activeKey != "topology" ?  `calc(100% - ${leftWidth}px)` :'100%'}}
                            className="right-content">
                                <Tabs
                                    onChange={onChange}
                                    defaultActiveKey={activeKey} 
                                    size="large" 
                                    style={{ padding: '5px 0px', margin: 0}}
                                >
                                    {
                                        bizModelData.map(item => {
                                            return (
                                                <TabPane tab={item.moduleName} key={item.moduleCode}>
                                                    <EcsInstance cmModuleId={item.cmModuleId} treeNode={selectTreeNode} history={history} biz={biz} tabVisible={activeKey == item.moduleCode} />
                                                </TabPane>
                                            )
                                        })
                                    }
                                    <TabPane 
                                        tab={
                                            <div>
                                                拓扑
                                                <Tooltip 
                                                    title="从第三级开始，双击每个节点，可以展示下级的关联资源"
                                                    placement="right"
                                                >
                                                    <QuestionCircleFilled
                                                        style={{
                                                            marginLeft: 10,
                                                        }}
                                                    />
                                                </Tooltip>
                                            </div>
                                        } 
                                        key="topology"
                                    >
                                        {activeKey == "topology" && <EcsTopology biz={biz} moduleList={modelData} bizModuleList={bizModelData} BizModelCodes={BizModelCodes}/>}
                                    </TabPane>
                                </Tabs>
                        </div>
                    }
                </div>
                </section>
            </section>
        </CmdbContent>
    )
};

export default BusinessTopology;